<template>
    <div class="home">
        <div class="title">东华塔陵园</div>
        <main>
            <div class="box box-11" @click="">
                <div class="box-img"></div>
                <div>预约扫墓</div>
            </div>
            <div class="box box-17" @click="">
                <div class="box-img"></div>
                <div>预约安葬</div>
            </div>
            <div class="box box-12" @click="">
                <div class="box-img"></div>
                <div>预约看墓</div>
            </div>
            <div class="box box-23" @click="">
                <div class="box-img"></div>
                <div>导航</div>
            </div>
            <div class="box box-5" @click="$router.push('/businessInquiry')">
                <div class="box-img"></div>
                <div>墓位查询</div>
            </div>
            <div class="box box-24" @click="$router.push('/renew')">
                <div class="box-img"></div>
                <div>墓位续费</div>
            </div>
            <div class="box box-3" @click="$router.push('/appointmentRecord')">
                <div class="box-img"></div>
                <div>预约记录</div>
            </div>
            <div class="box box-7" @click="$router.push('/renewalRecord')">
                <div class="box-img"></div>
                <div>续费记录</div>
            </div>
            <!-- <div class="box box-5" @click="$router.push('/informationList')">
                <div class="box-img"></div>
                <div>信息</div>
            </div> -->
            <!-- <div class="box box-3" @click="$router.push('/newsList')">
                <div class="box-img"></div>
                <div>行业新闻</div>
            </div>
            <div class="box box-7" @click="$router.push('/noticeList')">
                <div class="box-img"></div>
                <div>通知公告</div>
            </div>
            <div class="box box-24" @click="$router.push('/appointmentRecord')">
                <div class="box-img"></div>
                <div>预约记录</div>
            </div>
           <div class="box box-10" @click="show1 = true">
                <div class="box-img"></div>
                <div>电话预约</div>
            </div> -->
            <!-- <div class="box box-5"  @click="$router.push(`/funeralParlour?url=/satisfactionSurvey`)"> -->
        </main>
    </div>
</template>

<script lang="ts" setup >
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, readonly } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute } from 'vue-router'
    import { useWeixinLogin1 } from '@/hooks'
    const route = useRoute()
    // 微信授权并且跳转到对应页面
    // useWeixinLogin1(route.query.redirect)
    
</script>
<style lang="scss" scoped>
    .home {
        @include padding-global;
        width: 100vw;
        height: 100vh;
        // padding: 6px 15px;
        box-sizing: border-box;
        // background-image: linear-gradient(#9ab4fd, #ffffff);
        background-image: url('@/assets/bg/bg5.png');
        // background-position: 40% 0;
        // background-size: cover;
        background-size: 100% 100%;
        overflow: scroll;
        text-align: center;
    }
    .title {
        font-size: 50px;
        letter-spacing: 50px;
        color: #fff;
        padding: 20px 0;
        font-family: '宋体';
    }
    main {
        margin: 0 auto;
        padding-top: 40px;
        display: flex;
        // justify-content: space-between;
        // align-content: space-around;
        flex-wrap: wrap;
        width: 300px;
        // height: 400px;
        height: 300px;
        .box {
            // width: 148px;
            width: 90px;
            height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            // color: #f5f5f5;
            // color: #868484;
            color: #fffbfb;
            font-weight: bold;
            font-size: 14px;
            border-radius: 20px;
            margin: 0px;
        }
        .box:not(:nth-child(3n)) {
            margin-right: 15px;
        }
        .box-1{
            // background-color: rgb(50,180,72);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-1-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-1.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-2{
            // background-color: rgb(342,105,66);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-2-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 230% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-2.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-3{
            // background-color: rgb(2,183,238);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-3-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-3.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-4{
            // background-color: rgb(178,125,217);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-4-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-4.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-5{
            // background-color: rgb(21,189,154);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-5-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-5.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-6{
            // background-color: rgb(161,79,115);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-6-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 230% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-6.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-7{
            // background-color: rgb(103, 104, 97);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-7-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-7.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-8{
            // background-color: rgb(90,88,185);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-8-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 220% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-8.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-9{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-9.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-10{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-27.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-11{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-11.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-12{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-12.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-17{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-17.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-23{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-23.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-24{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-24.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
        .box-26{
            // background-color: rgb(118,161,79);
            background-color: rgba(255, 255, 255,0.5);

            // background-image: url('@/assets/home/box-9-t.png');
            // background-size: 60px 60px;
            // background-repeat: no-repeat;
            // background-position: 200% -40%;
            .box-img {
                width: 40px;
                height: 40px;
                background: url('@/assets/home/box-26.png');
                background-size: 100% 100%;
                margin: 10px 0 0 0;
            }
        }
    }
</style>